<template>
  <div>
    <!--  我的分享码弹窗  -->
    <!-- 添加或修改商品资质信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <el-form-item label="方案名称" prop="memo">
          <el-input disabled v-model="form.memo" size="small" placeholder="请输入方案名称"/>
        </el-form-item>
        <el-form-item label="要求" prop="requireMemo" v-if="ideentity=='operate'">
          <el-input v-model="form.requireMemo" type="textarea"
                    :autosize="{ minRows: 2, maxRows: 10}"
                    placeholder="请输入要求内容"/>
        </el-form-item>
        <el-form-item label="商品类目" prop="categoryId">
          <el-cascader filterable v-model="form.categoryId"
                       placeholder="请选择类目"
                       :options="categoryList"
                       :props="{ value: 'id', label: 'name', emitPath: false }" :show-all-levels="false" clearable
                       @change="getCategoryInfo" @clearCheckedNodes="clearCheckedNodes">
          </el-cascader>
        </el-form-item>
        <!--        <el-form-item label="操作类型" prop="operationType">-->
        <!--          <el-select v-model="form.operationType" placeholder="请选择操作类型" clearable>-->
        <!--            <el-option-->
        <!--              v-for="(item,index) in dict.type.operation_type"-->
        <!--              :key="index"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item v-for="(item,index) in quailficationInfoList" :key="index" :label="item.label">
          <div v-if="item.type=='image'">
            <image-upload v-model="item.value" :changeSize="true" :limit="1" :is-show-tip="false" width="50px"
                          height="50px"/>
            <span class="text-danger fontSize12">{{ item.tips }}</span>
          </div>
          <div v-else>
            <el-input v-model="item.value" placeholder="请输入资质信息id"/>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="quailficationInfoList&&quailficationInfoList.length>0" :loading="buttonLoading" type="primary"
                   @click="submitForm">确 定
        </el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {uploadLogisticsProof} from "@/api/order/supplementOrder";
import {selectlistCollectProductCategory} from "@/api/gather/collectProductCategory";
import {addCollectProductQualifications, selectQuailficationByCategoryId} from "@/api/certificate/certificate";

export default {
  name: 'order-list',
  dicts: ['operation_type'],
  props: {
    ideentity: {//身份校验
      type: String,
      default: ''
    },
    categoryList: {
      type: Array,
      default: []
    },
    certificateData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      open: true,
      buttonLoading: false,
      title: "",
      form: {},
      // 表单校验
      rules: {
        categoryId: [{required: true, message: "类目id不能为空", trigger: "blur"}],
        categoryQualificationId: [{required: true, message: "类目资质类型id不能为空", trigger: "blur"}],
        value: [{required: true, message: "提交信息不能为空", trigger: "blur"}],
        collectProductId: [{required: true, message: "关联产品不能为空", trigger: "blur"}],
        memo: [{required: true, message: "备注不能为空", trigger: "blur"}],
        operationType: [{required: true, message: "请选择操作类型", trigger: "change"}]
      },
      quailficationInfoList: []
    }
  },
  mounted() {
    if (this.certificateData.type == '0') {
      this.form = this.certificateData
      this.form.memo = this.certificateData.collectProductId
      this.getCategoryInfo(this.form.categoryId)
    } else {
      this.form = this.certificateData.program
      // this.quailficationInfoList = JSON.parse(this.form.details)
      this.quailficationInfoList = this.certificateData.program.qualificationVos
    }
    console.log('this.form', this.form, this.quailficationInfoList)
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      console.log('上传的商品信息', this.form, this.quailficationInfoList)
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          let valueList = [], list = this.quailficationInfoList;
          // valueList = [...list, ...newList]
          for (let i = 0; i < list.length; i++) {
            valueList.push({
              "id": list[i].id,
              "type": list[i].type,
              "key": list[i].qualificationKey,
              "value": list[i].value
            })
          }
          // console.log('valueList', valueList)
          this.form.detailsList = valueList
          this.form.operationType = this.certificateData.type
          addCollectProductQualifications(this.form).then(response => {
            this.$modal.msgSuccess(response.msg);
            this.close('isRef')
          }).finally(() => {
            this.buttonLoading = false;
          });
          // }
        }
      });
    },
    // 取消按钮
    close(type) {
      this.reset()
      this.$emit('closeCertificateModal', false, type)
    },
    // 表单重置
    reset() {
      this.form = {
        // categoryId: undefined,
        // categoryQualificationId: undefined,
        // value: undefined,
        // memo: undefined,
        categoryId: undefined,
        categoryQualificationId: undefined,
        memo: undefined,
        requireMemo: undefined,
        // value: undefined,
        detailsList: []
      };
      this.resetForm("form");
    },
    // // 商品类目
    // getGoodsCategory() {
    //   selectlistCollectProductCategory().then(response => {
    //     this.categoryList = this.handleTree(response.data, "id", "parentId");
    //   });
    // },
    // 选择类目
    getCategoryInfo(e, type) {
      console.log('选择类目', e)
      this.quailficationInfoList = []
      selectQuailficationByCategoryId({categoryId: e}).then(res => {
        let list = res.data
        for (let i = 0; i < list.length; i++) {
          list[i]['value'] = ''
        }
        var resMap = new Map();
        res.data.forEach(item => {
          item.show = true;
          resMap.set(item.qualificationKey, item);
        })
        this.quailficationInfoList.forEach(item => {
          var attribute = resMap.get(item.qualificationKey)
          if (attribute == undefined) {
            item.show = false;
            resMap.set(item.qualificationKey, item);
          } else {
            attribute.value = item.value;
          }
        });
        var attr = [];
        resMap.forEach((key, val) => {
          attr.push(key);
        });
        this.quailficationInfoList = attr;
        console.log('this.quailficationInfoList', this.quailficationInfoList)
      })
    },
    // 清空类目选中节点
    clearCheckedNodes(e) {
      console.log('eee', e)
    },
  }
}
</script>
<style scoped>
.el-divider__text {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
</style>
